<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>Every In-N-Out</title>
		<meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no" />
		<link
			href="https://api.tiles.mapbox.com/mapbox-gl-js/v1.2.1/mapbox-gl.css"
			rel="stylesheet"
		/>
		<style>
			body {
				margin: 0;
				padding: 0;
			}
			#map {
				position: absolute;
				top: 0;
				bottom: 0;
				width: 100%;
			}

			.mapboxgl-ctrl.legend {
				padding: 1em;
				background-color: white;
				border-radius: 0.5px;
			}
		</style>
	</head>
	<body>
		<div id="map"></div>

		<script src="https://api.tiles.mapbox.com/mapbox-gl-js/v1.2.1/mapbox-gl.js"></script>

		<script type="module">
			import Ulysses from "./ulysses/index.esm.js";
			import timer from "./ulysses/plugins/timer.mjs";
			import Legend from "./legend.js";

			mapboxgl.accessToken =
				"pk.eyJ1IjoidXNhdG9kYXlncmFwaGljcyIsImEiOiJ0S3BGdndrIn0.5juF5LWz_GRcndian32tZA";

			const map = new mapboxgl.Map({
				container: "map", // container id
				style: "mapbox://styles/mapbox/streets-v11", // stylesheet location
				center: [-117.97348999999997, 34.06766999999999], // starting position [lng, lat]
				zoom: 9, // starting zoom
				maxZoom: 15,
			});

			const legend = new Legend()
				.addTo(map, "top-left")
				.setContent(`<p>Showing every In-N-Out location.</p>`);

			const story = (window.story = new Ulysses({ map }));

			story.use(timer({ duration: 5000, start: false }));
			story.on("timer.start", e => {
				console.log("Playing story");
			});

			story.on("timer.stop", e => {
				console.log("Stopping story");
			});

			story.on("step", e => {
				const p = e.feature.properties;
				legend.setContent(`
<h3>${p.name}</h3>
<address>
${p["addr:full"]}<br>
${p["addr:city"]}, ${p["addr:state"]} ${p["addr:postcode"]}<br>
</address>

<p>Press [space] to stop/start map movement</p>`);
			});

			fetch("./data/innout.geojson")
				.then(r => r.json())
				.then(steps => {
					// sort by store number, which might be the order it opened
					steps.features.sort((a, b) => +a.properties.ref - +b.properties.ref);
					story.steps = steps;

					addMarkers(map, steps);
					story.start();
				});

			function addMarkers(map, fc) {
				fc.features.forEach(f => {
					const marker = new mapboxgl.Marker()
						.setLngLat(f.geometry.coordinates)
						.addTo(map);
				});
			}
		</script>
	</body>
</html>
